<template>
  <div class="login">
    <div class="container" v-if="login">
      <a-form-model class="form" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
        <a-tabs default-active-key="1" @change="changeEvent">
          <a-tab-pane key="1" tab="账号密码登录">
            <a-form-model-item>
              <a-input v-model="formInline.user" size="large" placeholder="随便输入">
                <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input
                v-model="formInline.password"
                size="large"
                type="password"
                placeholder="随便输入"
              >
                <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <div class="center">
                <a-button
                  class="btn"
                  type="primary"
                  html-type="submit"
                  size="large"
                  :disabled="formInline.user === '' || formInline.password === ''"
                  >Log in</a-button
                >
                <div class="tips">
                  <span>忘记密码</span>
                </div>
              </div>
            </a-form-model-item>
          </a-tab-pane>
          <a-tab-pane key="2" tab="手机号登录" force-render>
            <a-form-model-item>
              <a-input v-model="formInline.phone" size="large" placeholder="随便输入">
                <a-icon slot="prefix" type="phone" style="color: rgba(0, 0, 0, 0.25)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <div class="code">
                <a-input v-model="formInline.code" size="large" type="text" placeholder="随便输入">
                  <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
                </a-input>
                <a-button size="large">发送验证码</a-button>
              </div>
            </a-form-model-item>
            <a-form-model-item>
              <div class="center">
                <a-button
                  class="btn"
                  type="primary"
                  html-type="submit"
                  size="large"
                  :disabled="formInline.phone === '' || formInline.code === ''"
                  >Log in</a-button
                >
                <div class="tips">
                  <span>忘记密码</span>
                </div>
              </div>
            </a-form-model-item>
          </a-tab-pane>
        </a-tabs>
      </a-form-model>
    </div>
    <div v-else>
      <a-spin size="large" />
    </div>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue';
import Component from 'vue-class-component';
// if you want use component , you can edit ;
/**
 * import {example} from 'example';
 *
 * @Component({
 *    components:{
 *
 *  }
 * })
 */
@Component({
  components: {},
})
export default class Login extends Vue {
  private debugMode: any;
  private formInline = {
    user: '',
    password: '',
    phone: '',
    code: '',
  };
  private login = true;
  // this is created function
  public created() {
    console.log('created');
  }
  // this is mounted function
  public mounted() {
    console.log('mounted');
  }
  // handle login submit event
  public handleSubmit() {
    console.log(this.formInline);
    if (this.formInline.user && this.formInline.password) {
      this.submitLogin('user');
    } else if (this.formInline.phone && this.formInline.code) {
      this.submitLogin('phone');
    }
  }
  public submitLogin(type: string) {
    if (this.debugMode.debug) {
      console.log(type);
    }
    localStorage.setItem('isLogin', JSON.stringify(true));
    this.login = false;
    setTimeout(() => {
      this.$router.push('/').catch(err=>err);
    }, 3000);
  }
  public changeEvent() {
    console.log('fffffffff');
  }
}
</script>

<style lang='less' scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../assets/bg.svg);
  background-repeat: no-repeat;
  .container {
    width: 400px;
    height: 300px;
    background: #fff;
    padding: 20px;
    .center {
      width: calc(400px - 40px);
      text-align: right;
      .btn {
        width: 100%;
      }
    }
  }
  .code {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>